import React from 'react';
import LazyLoad from "react-lazyload";
import { ListWrapper, List, ListItem } from './listStyle';
import { getCount } from '../../api/utils';

interface Props extends csc.Props {
  recommendList?: { id: number, picUrl: string, playCount: number, name: string }[];
}

function RecommendList(props: Props) {
  const { recommendList } = props;

  return (
    <ListWrapper>
      <h1 className="title" >推荐歌单</h1>
      <List>
        {
          recommendList?.map((item, index) => (
            <ListItem key={item.id + index} >
              <div className="img_wrapper" >
              <div className="decorate"></div>
                {/* 加此参数可以减小请求的图片资源大小 */}
                <LazyLoad placeholder={<img width="100%" height="100%" src={require('../../assets/images/wallhaven-q265xq.png')} alt="music" />} >
                  <img src={item.picUrl + "?param=300x300"} alt="music" />
                </LazyLoad>
                <div className="play_count" >
                  <i className="iconfont iconyinle-bofang" ></i>
                  <span className="count" >{ getCount(item.playCount) }</span>
                </div>
              </div>
              <div className="desc" >{ item.name }</div>
            </ListItem>
          ))
        }
      </List>
      {props.children}
    </ListWrapper>
  );
}

export default RecommendList;
